<template>
  <view class="page">
    <template v-if="!isEmpty">
      <!--			年份选择器-->
      <view class="year-selector">
        <view class="year-item active">{{ queryParams.structureYear }}</view>
      </view>
      <!--			题目结构列表-->
      <view class="paper-structure-list">
        <view class="paper-structure-item" v-for="item in structList" :key="item.structureId">
          <!--			有子节点-->
          <view
            class="parent-node node"
            @click="toggleParentNode(item)"
            v-if="item.children && item.children.length > 0"
            :class="{ active: item.showChildren }"
          >
            <view style="display: flex; align-items: center">
              <!--						标记是否有做过-->
              <view class="point" :class="item.isDo === 0 ? 'noDo' : 'hasDo'"></view>
              <view class="text">{{ item.structureName }}</view>
            </view>
            <!--					下箭头展开-->
            <image :src="downArrowIcon" class="icon" v-if="!item.showChildren"></image>
            <!--					上箭头收起-->
            <image :src="upArrowIcon" class="icon" v-else></image>
          </view>
          <!--		没有子节点的末级节点		-->
          <view class="children-node node" v-else @click="goToPractice(item)">
            <view class="point" :class="item.isDo === 0 ? 'noDo' : 'hasDo'"></view>
            <view>
              <text class="text">{{ item.structureName }}</text>
              <text class="tips" v-if="item.lastPractice">[上次]</text>
            </view>
          </view>
          <!--			父节点的子节点-->
          <template v-if="item.showChildren">
            <view class="children-node node" @click="goToPractice(child)" v-for="child in item.children" :key="child.structureId">
              <view class="point" :class="child.isDo === 0 ? 'noDo' : 'hasDo'"></view>
              <view>
                <text class="text">{{ child.structureName }}</text>
                <text class="tips" v-if="child.lastPractice">\t\t[上次]</text>
              </view>
            </view>
          </template>
        </view>
      </view>
    </template>
    <view v-else style="width: calc(100vw - 108rpx)">
      <empty height="100vh" text="暂未录入"></empty>
    </view>
    <checkIsVip ref="checkIsVip"></checkIsVip>
  </view>
</template>

<script>
import checkIsVip from "@/components/checklsVip/index.vue"
import empty from "@/components/empty.vue"
import downArrowIcon from "./assets/down_arrow.png"
import upArrowIcon from "./assets/up_arrow.png"
import persistence from "@/store/persistence"
import { handleUrlParams, list2tree } from "@/utils"
import request from "@/utils/request"
export default {
  components: { empty, checkIsVip },
  data() {
    return {
      queryParams: {
        taskId: "",
        structureYear: "",
        structureName: "",
      },
      isEmpty: false,
      downArrowIcon,
      upArrowIcon,
      structList: [],
    }
  },
  onLoad(query) {
    this.queryParams = query
    //动态设置页面标题
    uni.setNavigationBarTitle({
      title: query.structureName,
    })
  },
  onShow() {
    this.getStructureList()
  },
  methods: {
    toggleParentNode(item) {
      this.$set(item, "showChildren", !item.showChildren)
    },
    //跳转到刷题页面
    async goToPractice(item) {
      //检查该题目所设置的付费规则
      //设置了vip规则则跳转到vip开通界面
      if (item.businessRules === "MemberFree") {
        if (!(await this.$refs.checkIsVip.checkIsVip())) return
      }
      //记录上次做的题
      let obj = persistence.rememberLastQuestion.get()
      persistence.rememberLastQuestion.set({
        ...obj,
        lastPractice: item.structureId,
      })
      uni.navigateTo({
        url: handleUrlParams("/practice/pages/index/index", {
          structureId: item.structureId,
          typeCode: item.typeCode,
					doTopicUser: item.isDo.toString(),
        }),
      })
    },
    //获取结构列表
    async getStructureList() {
      const res = await request({
        showLoading: true,
        errorHandle: true,
        url: "taskAssignment/listTopic",
        data: {
          taskId: this.queryParams.taskId,
        },
      })
      this.structList = res
      this.isEmpty = this.structList.length === 0
    },
  },
}
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  height: 100vh;
  .year-selector {
    padding: 30rpx;
    height: 100%;
    overflow: auto;
    background: var(--gray-background-color);
    .year-item {
      padding: 30rpx;
      margin-bottom: 30rpx;
      border-radius: 50rpx;
      &.active {
        background: var(--theme-color);
				color: var(--text-color-white);
      }
    }
  }
  .paper-structure-list {
    padding: 50rpx;
    height: 100%;
    overflow: auto;
    width: 0;
    flex: 1;
    .node {
      min-height: 80rpx;
      border-radius: 40rpx;
      padding: 20rpx;
      margin-bottom: 40rpx;
      display: flex;
      .point {
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
        margin-right: 14rpx;
        &.hasDo {
          background: #d3d3d3;
        }
        &.noDo {
          background: #ff6347;
        }
      }
      &.parent-node {
        align-items: center;
        justify-content: space-between;
        background: white;
        border: 3rpx solid #d5d5d5;
        font-weight: 500;
        font-size: 32rpx;
        transition: background-color 0.3s;
        .icon {
          width: 30rpx;
          height: 30rpx;
        }
        .text {
          //文本溢出部分自动加省略号
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      &.children-node {
        background: var(--gray-background-color);
        font-size: 30rpx;
        align-items: center;
        .tips {
          color: var(--text-color-light);
        }
      }
      &.active {
        background: var(--theme-color);
        border: 2rpx solid transparent;
      }
    }
  }
}
</style>
